import React, { 
    Component 
    ,Suspense//路由正在跳转的时候  加载的内容
} from 'react'
import {
    Switch,//精确匹配每一个组件
    Route,//路由视图
    Redirect//重定向
} from "react-router-dom"
export class RouterView extends Component {
    render() {
        console.log(this.props);
        const  {routes} = this.props
        return (
            <Suspense fallback={"路由加载中，请稍等"}>
                <Switch>
                    {
                        routes && routes.map((item,index)=>{
                            // console.log(item);
                            return <Route key={index} path={item.path} render={(props)=>{
                                // debugger
                                //如果重定向存在 让他去重定向组件  如果不存在 让他正常渲染component
                                return item.redirect? <Redirect to={item.redirect}></Redirect>
                                :<item.component routes={item.children} {...props} ></item.component>
                            }}></Route>
                        })
                    }
                </Switch>
            </Suspense>
        )
    }
}

export default RouterView

